<template>
  <a-drawer v-model:visible="open" title="欠费统计列表" placement="right" width="50%">
    <BasicTable @register="registerTable1" />
  </a-drawer>
  <div class="alert ant-alert ant-alert-info alert-left" @click="open = true">更多>></div>
  <BasicTable @register="registerTable" />
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { defHttp } from '@/utils/http/axios';
  import { BasicColumn, BasicTable } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  const list = (params: any) => defHttp.get({ url: '/syMarketingDepartment/debtList', params });
  const columns: BasicColumn[] = [
    { title: '用户账号', align: 'center', dataIndex: 'username' },
    { title: '用户姓名', align: 'center', dataIndex: 'realname' },
    { title: '用户年龄', align: 'center', dataIndex: 'age' },
    { title: '用户电话', align: 'center', dataIndex: 'phone' },
    { title: '欠费金额（元）', align: 'center', dataIndex: 'amountInArrear' },
  ];
  //注册table数据
  const { tableContext } = useListPage({
    tableProps: {
      api: list,
      columns,
      canResize: false,
      useSearchForm: false,
      showTableSetting: false, // 显示表格设置工具
      pagination: false, // 分页信息配置，为 false 不显示分页
      showActionColumn: false, // 是否显示操作列
      size: 'small', //紧凑型表格
      maxHeight: 250,
      showIndexColumn: true,
    },
  });
  const [registerTable, {}, {}] = tableContext;

  const { tableContext: tableContext1 } = useListPage({
    tableProps: {
      api: list,
      columns,
      canResize: false,
      useSearchForm: false,
      showTableSetting: false, // 显示表格设置工具
      pagination: true, // 分页信息配置，为 false 不显示分页
      showActionColumn: false, // 是否显示操作列
      size: 'small', //紧凑型表格
      maxHeight: 250,
      showIndexColumn: true,
    },
  });
  const [registerTable1, {}, {}] = tableContext1;

  const open = ref<boolean>(false);
</script>

<style lang="less" scoped>
  .alert-left {
    width: calc(100% - 12px);
    margin-left: 6px;
    font-size: 14px;
    padding: 2px 15px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    &:hover {
      cursor: pointer;
      color: #4bc0ff;
    }
  }
</style>
